<script lang="jsx">
  import { mergeVModel, formatData, isEmptyObj } from '../utils'

  export default {
    name: 'CrudTableSearch',
    props: {
      defaultFields: {
        type: Object,
        default: () => ({})
      },
      hideReset: Boolean,
      collapse: Boolean,
      formatter: [Object, Number]
    },
    data() {
      return {
        form: {},
        tempObj: {...this.defaultFields},
        showForm: false
      }
    },
    inject: ['resetTableData', 'setField', 'useBridge'],
    created() {
      this.setField(this.defaultFields)
      this.form = Object.assign(this.tempObj, this.defaultFields)
    },
    methods: {
      getFormData() {
        // 第三个参数是，是否删除源字段
        return formatData(this.form, this.formatter, true)
      },
      doSearch() {
        this.resetTableData(this.getFormData())
      },
      doReset() {
        this.showForm = false
        this.$refs?.formRef?.resetFields()
        const tempObj = {...this.form}
        for (const key in this.form) {
          tempObj[key] = undefined
          this.form[key] = undefined
          delete this.form[key]
        }
        this.resetTableData(formatData(tempObj, this.formatter, true))
      },
      toggleForm() {
        this.showForm = !this.showForm
      }
    },
    render() {
      const { collapse, showForm } = this
      const { search: searchSlots, default: defaultSlots } = this.$scopedSlots
      const formNodes = searchSlots && mergeVModel(searchSlots({form: this.getFormData()}), this.form)
      const defaultNodes = defaultSlots && defaultSlots({form: this.getFormData()})
      // this.useBridge('searchParams', this.getFormData())

      if(collapse) return (
        <div class="collapse-wrap" style={{marginRight: showForm ? 0 : '10px'}}>
          <el-button
          v-show={ !showForm }
          style={{marginBottom: '14px', marginRight: showForm ? '12px' : 0}}
          icon={ 'el-icon-search' }
          type={ 'success' }
          onClick={ this.toggleForm }
          >{ '查询' }</el-button>
          <transition name="el-zoom-in-top">
            <el-form v-show={ showForm } props={{ model: this.form }} ref="formRef" inline>
              { formNodes }
              { defaultNodes }
              <el-form-item style={{marginRight: '12px'}}>
                <el-button icon="el-icon-search" type="success" onClick={this.doSearch}>搜索</el-button>
              </el-form-item>
              {
                !this.hideReset &&
                (
                  <el-form-item>
                    <el-button icon="el-icon-refresh" type="warning" onClick={this.doReset}>重置</el-button>
                  </el-form-item>
                )
              }
              <el-form-item style={{marginRight: '12px'}}>
                <el-button v-show={ showForm } icon="el-icon-circle-close" type="default" onClick={this.toggleForm}>隐藏</el-button>
              </el-form-item>
            </el-form>
          </transition>
        </div>
      )

      return (
        <el-form props={{ model: this.form }} ref="formRef" inline>
          { formNodes }
          { defaultNodes }
          <el-form-item style={{marginRight: '12px'}}>
            <el-button icon="el-icon-search" type="success" onClick={this.doSearch}>搜索</el-button>
          </el-form-item>
          {
            !this.hideReset &&
            (
              <el-form-item>
                <el-button icon="el-icon-refresh" type="warning" onClick={this.doReset}>重置</el-button>
              </el-form-item>
            )
          }

        </el-form>
      )
    }
  }
</script>
